<template>
  <view class="topList" v-if="topList">
    <!-- 头部区域 -->
    <my-navHead title="排行榜" nav="热歌风向标" />
    <!-- 内容区域 -->

    <swiper class="topListSwiper" circular next-margin="50rpx">
      <swiper-item v-for="item in topList" :key="item.id">
        <view class="swiperItem">
          <view class="title">{{ item.name }}</view>
          <view class="musicItem" v-for="(x, index) in item.tracks" :key="x.id">
            <image :src="x.al.picUrl"></image>
            <text class="count">{{ index + 1 }}</text>
            <text class="musicName">{{ x.name }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: 'my-topList',
  props: {
    // 排行榜轮播数据
    topList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.topList {
  padding: 20rpx;
}

.topListSwiper {
  height: 400rpx;
}

.swiperItem {
  width: 96%;
  background: #fbfbfb;
}
.swiperItem .title {
  font-size: 30rpx;
  line-height: 80rpx;
}

.musicItem {
  /* 当一个元素设置为flex，其子元素会自动成为block元素*/
  display: flex;
  margin-bottom: 20rpx;
}

.musicItem image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 6rpx;
}

.musicItem .count {
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.musicItem .musicName {
  height: 100rpx;
  line-height: 100rpx;
  max-width: 400rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
